<!doctype html>
<html lang="zh" class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>xiaowumin-mark</title>
  <meta name="Description" content="Home Page of iissnan">
  <meta name="color-scheme" content="dark light">
  <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
  <link rel="stylesheet" type="text/css" href="assets/css/main.css"/>
</head>

<body>
  <div class="vi">
    <h1 class="animate-slide-in-down">xiaowumin-mark</h1>
    <div class="quote">
      <span class="quote-line quote-line-start animate-slide-in-left"></span>
      <span class="quote-icon quote-icon-start animate-slide-in-down">
        <i class="icon icon-quotes-left"></i>
      </span>
      <p class="quote-content animate-slide-in-down">不积跬步，无以至千里。不积小流，无以成江海。</p>
      <p class="quote-author animate-slide-in-down">《劝学篇》—— <em>荀子</em></p>
      <span class="quote-icon quote-icon-end animate-slide-in-up">
        <i class="icon icon-quotes-right"></i>
      </span>
      <span class="quote-line quote-line-end animate-slide-in-right"></span>
    </div>
    <div class="links">
      <a href="https://github.com/xiaowumin-mark" class="animate-slide-in-down">GitHub</a>
      <a href="https://space.bilibili.com/2073384117" class="animate-slide-in-down">bilibili</a>
      <a href="tencent://message/?uin=1853046879&Site=&Menu=yes" class="animate-slide-in-down">QQ</a>
      
    </div>
    <div class="location">
      <span class="location-icon animate-slide-in-up">
        <i class="icon icon-map-pin"></i>
      </span>
      <span class="location-text animate-slide-in-down">Shuzhou - China</span>
    </div>
    <div class="relocating">
      Navigating to: <span class="relocate-location"></span>...
    </div>
  </div>

  <script src="assets/vendors/jquery-3.3.1.min.js"></script>
  <script>
    $(function () {
      var SLIDE_IN_DOWN = { opacity: 1, top: 0 };
      var SLIDE_IN_UP = { opacity: 1, bottom: 0 };
      var SLIDE_IN_LEFT = { left: 0 };
      var SLIDE_IN_RIGHT = { right: 0 };

      registerCheatCode();
      executeAnimations();

      function executeAnimations() {
        $.when()
          .then(animateTitle)
          .then(animateQuote)
          .then(animateLinks)
          .then(animateLocation);
      }

      function animateTitle() {
        return animate('h1', SLIDE_IN_DOWN);
      }

      function animateQuote() {
        return $.when(
          animate('.quote-line-start', SLIDE_IN_LEFT),
          animate('.quote-line-end',SLIDE_IN_RIGHT),
          animate('.quote-icon-start', SLIDE_IN_DOWN),
          animate('.quote-icon-end', SLIDE_IN_UP)
        )
          .then(function () {
            return animate('.quote-content', SLIDE_IN_DOWN);
          })
          .then(function () {
            return animate('.quote-author', SLIDE_IN_DOWN);
          });
      }

      function animateLinks() {
        var DELAY_STEP = 200;
        var elements = $('.links a');
        var concurrent = $.makeArray(elements)
          .map(function (element, index) {
            return animate(element, SLIDE_IN_DOWN, index * DELAY_STEP);
          });

        return $.when.apply($, concurrent);
      }

      function animateLocation() {
        return $.when(
          animate('.location-icon', SLIDE_IN_UP),
          animate('.location-text', SLIDE_IN_DOWN)
        );
      }

      function animate(selector, properties, delay, options) {
        delay = delay || 0;
        return $(selector).delay(delay)
          .animate(properties, options)
          .promise();
      }

      function registerCheatCode() {
        $(document.body).on('keydown', function (event) {
          var KEY_B = 66;

          if (event.which === KEY_B) {
            $('.relocate-location').text('Bookmark Page');
            $('.relocating').css('opacity', 1);

            window.setTimeout(function () {
              window.location.href = '/bookmarks.html';
            }, 1000);
          }
        });
      }
    });
  </script>
</body>
</html>
